<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="Visible"
      width="100%"
      fullscreen
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div v-if="batch_type!='1'&&batch_type!='3'" class="dialogBox top">
          <div class="dialogBoxItem">
            <div style="width:24%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{edit_time_title}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="edit_time"
                  class="Required" 
                  @blur="Blur('edit_time')"
                  @focus="Focus('edit_time')"
                  v-model="data.edit_time"
                  value-format="timestamp"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div v-if="batch_type=='3'" class="dialogBox top">
          <div class="dialogBoxItem">
            <div style="width:24%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressCargoManagementLang.trajectory_time')}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="track_at"
                  class="Required" 
                  @blur="Blur('track_at')"
                  @focus="Focus('track_at')"
                  v-model="trajectory_data.track_at"
                  value-format="timestamp"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
            <div style="width:24%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressCargoManagementLang.trajectory_text_zh')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="desc"
                  @blur="handleBlur('desc',$event)"
                  @focus="handleFocus($event)"
                  class="Required"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="trajectory_data.desc"
                ></el-input>
              </div>
            </div>
            <div style="width:24%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressCargoManagementLang.trajectory_text_en')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="desc_en"
                  @blur="handleBlur('desc_en',$event)"
                  @focus="handleFocus($event)"
                  class="Required"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="trajectory_data.desc_en"
                ></el-input>
              </div>
            </div>
            <div style="width:24%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressCargoManagementLang.trajectory_text_ru')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="desc_ru"
                  @blur="handleBlur('desc_ru',$event)"
                  @focus="handleFocus($event)"
                  class="Required"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="trajectory_data.desc_ru"
                ></el-input>
              </div>
            </div>
          </div>
        </div>


        <div style="position: relative;flex:1;">
          <div class="content-box">
            <FilterBox
              :labelWidth="120"
              :filterItemList="filterItemList"
              :filterData="filterData"
              @search="search"
              @clear="clear"
              @keep="keepHeaderList"
            >
            </FilterBox>
            <MyTable
              :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}}"
              :tableColumn="tableColumn"
              :tableData="tableData"
              :isOrder="false"
              @sendCheckBoxList="setCheckBox"
              :rowClassNameFunc="rowClassName"
              >
              <template v-slot:content="scope">
                <span class="moreContant" v-if="!!scope.config.MoreContant">
                  <span v-for="(item,k) in scope.config.MoreContant" :key="k">
                    <span  v-if="item.length>0">
                      <span v-for="(ite,ind) in item" :key="ind">
                        <span style="margin-left:5px;">{{ite.label}}:{{scope.row[ite.prop]}}</span>
                      </span>
                    </span>
                    <span v-else>
                      <span v-if="item.prop=='merge_num'">
                        <span v-if="scope.row.is_merge_package==1">{{item.label}}:{{scope.row[item.prop]}}</span>
                      </span>
                      <span v-else>{{item.label}}:{{scope.row[item.prop]}}</span>
                    </span>
                  </span>
                </span>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </template>
            </MyTable>
            <!-- 分页组件 -->

            <Pagination
              :isHaveBtn="false"
              ref="pagination"
              :currentPage="pageinfo.page"
              :pageSize="pageinfo.limit"
              :total="pageinfo.number_all"
              :page_all="pageinfo.page_all"
              @pagination="SetPagination"
            >
            </Pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      Visible: false,
      batch_type:'',//批量操作类型
      title:'',//dialog标题
      edit_time_title:'',//操作时间标题
      data:{
        edit_time:"",
        status:'',
      },

      trajectory_data:{
        track_at:"",
        desc:"",
        desc_en:"",
        desc_ru:"",
      },
      confirmTrue:true,//确定按钮保护
      
      filterItemList:[
        // input输入框
        { label:this.$t('ExpressCargoManagementLang.Package_number'),width:200, filterKey: 'package_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressCargoManagementLang.Outbound_time'),width:200, filterKey: 'out_time', filterType: 'SearchDate' },
        // 日期选择器
        { label:this.$t('ExpressCargoManagementLang.delivery_goods_time'),width:200, filterKey: 'pickup_time', filterType: 'SearchDate' }
      ],
      filterData:{
        page: "",
        limit: "100",
        order: "",

        type:2,
        status:"",
        
        package_sn: "",
        out_time:[],
        out_time1: "",
        out_time2: "",
        pickup_time:[],
        pickup_time1: "",
        pickup_time2: "",
      },
      tableColumn: [],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataArr:[],//多选框勾选集合
      sendDataArrCopy:[],
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(batch_type,status) {
      if(batch_type=='2'){
        this.tableColumn= [
          {
            label: "",
            prop: "table_code",
            width:40,
          },
          {
            type: 'checkbox',
            width: 40
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Package_number'),
            prop: "package_sn",
            width:200,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Carrier_number'),
            prop: "DispatchNumber",
            width:150,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Package_status'),
            prop: "status_name",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Line_name'),
            prop: "line_name",
            width:200,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Order_Number_packages'),
            prop: "package_num",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Gross_weight_goods'),
            prop: "gross_weight",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Cargo_weighing'),
            prop: "calWeight",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Outbound_time'),
            prop: "out_at",
            width:160,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.delivery_goods_time'),
            prop: "pickup_at",
            width:160,
          },
        ]
      }else{
        this.tableColumn= [
          {
            label: "",
            prop: "table_code",
            width:40,
          },
          {
            type: 'checkbox',
            width: 40
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Package_number'),
            prop: "package_sn",
            width:200,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Carrier_number'),
            prop: "DispatchNumber",
            width:150,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Line_name'),
            prop: "line_name",
            width:200,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Order_Number_packages'),
            prop: "package_num",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Gross_weight_goods'),
            prop: "gross_weight",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Cargo_weighing'),
            prop: "calWeight",
            width:100,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.Outbound_time'),
            prop: "out_at",
            width:160,
          },
          {
            checked:true,
            label: this.$t('ExpressCargoManagementLang.delivery_goods_time'),
            prop: "pickup_at",
            width:160,
          },
        ]
      }
      this.batch_type=batch_type
      this.filterData.status=status
      // 批量入库=1
      // 批量出库=2
      // 批量轨迹=3
      // 批量到货=4
      // 批量提货=5
      // 批量派送=6
      // 批量签收=7
      if(batch_type=='1'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_storage')
      }else if(batch_type=='2'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_outbound')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.Outbound_time')
        this.data.status=3
      }else if(batch_type=='3'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_trajectory')
      }else if(batch_type=='4'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_delivery')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.transfer_time')
        this.data.status=4
      }else if(batch_type=='5'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_pickup')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.takeDelivery_time')
        this.data.status=6
      }else if(batch_type=='6'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_dispatch')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.dispatch_time')
        this.data.status=5
      }else if(batch_type=='7'){
        this.title=this.$t('ExpressCargoManagementLang.Batch_signing')
        this.edit_time_title=this.$t('ExpressCargoManagementLang.SignReceipt_time')
        this.data.status=6
      }
      this.Visible = true;
      this.getTableData();
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.package_sn= "",
      this.filterData.out_time=[],
      this.filterData.out_time1= "",
      this.filterData.out_time2= "",
      this.filterData.pickup_time=[],
      this.filterData.pickup_time1= "",
      this.filterData.pickup_time2= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId+'batch'}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId+'batch');
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    // 获取表格数据
    getTableData(){
      this.$get("packageList", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataArr=[]
      });
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
      this.sendDataArrCopy=this.sendDataArrCopy.filter(item=>{return this.tableData.findIndex(el=>{return el.id==item.id})==-1})
      this.sendDataArrCopy.push(...this.sendDataArr)
    },
    rowClassName(row){
      if (row.is_merge_package==1) {
        return 'rowStyle'
      }
    },
    // 提交修改
    confirm() {
      //是否有空值必选项标识
      let type = true;
      if(this.sendDataArrCopy.length==0){
        this.$message.warning(this.$t('ExpressOrderManagementLang.message1'));
        type=false
      }
      if(this.batch_type==1){
        if (type&&this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000)
          this.$confirm(this.$t('ExpressCargoManagementLang.sure_cancel_pay'), this.$t('common.prompt'), {
            confirmButtonText: this.$t('common.confirm'),
            cancelButtonText: this.$t('common.cancel'),
          }).then(() => {
            let str=this.sendDataArrCopy.map((obj)=>{return ""+obj.package_sn}).join(",")
            let params = new FormData();
            params.append("packages_sns", str);
            this.$postForm("uploadPackages", params).then((res) => {
              this.confirmTrue=true
              if(res.success){
                this.cancel()
                this.$message.success(res.msg);
                this.$emit("success");
              }
            });
          }).catch(() => {});
        }
      }
      else if(this.batch_type==3){
        //输入框判断是否有值
        if(!this.trajectory_data.track_at){
          this.$refs.track_at.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.trajectory_data.desc){
          this.$refs.desc.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.trajectory_data.desc_en){
          this.$refs.desc_en.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.trajectory_data.desc_ru){
          this.$refs.desc_ru.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
        if (type&&this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000)
          let str=this.sendDataArr.map((obj)=>{return ""+obj.package_sn}).join(",")
          let params = new FormData();
          params.append("package_sns", str);
          params.append("track_at", this.trajectory_data.track_at/1000);
          params.append("desc", this.trajectory_data.desc);
          params.append("desc_en", this.trajectory_data.desc_en);
          params.append("desc_ru", this.trajectory_data.desc_ru);
          this.$postForm("addTrack", params).then((res) => {
            this.confirmTrue=true
            if(res.success){
              this.cancel()
              this.$message.success(res.msg);
              this.$emit("success");
            }
          });
        }
      }
      else {
        //输入框判断是否有值
        if(!this.data.edit_time){
          this.$refs.edit_time.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
        if (type&&this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000)
          let str=this.sendDataArr.map((obj)=>{return ""+obj.package_sn}).join(",")
          let params = new FormData();
          params.append("package_sns", str);
          params.append("edit_time", this.data.edit_time/1000);
          params.append("status", this.data.status);
          this.$postForm("packageStatus", params).then((res) => {
            this.confirmTrue=true
            if(res.success){
              this.cancel()
              this.$message.success(res.msg);
              this.$emit("success");
            }
          });
        }
      }
    },
    //取消修改
    cancel() {
      this.data={
        edit_time:"",
        status:'',
      }

      this.trajectory_data={
        track_at:"",
        desc:"",
        desc_en:"",
        desc_ru:"",
      }
      this.filterData={
        page: "",
        limit: "100",
        order: "",

        type:2,
        status:"",
        
        package_sn: "",
        out_time:[],
        out_time1: "",
        out_time2: "",
        pickup_time:[],
        pickup_time1: "",
        pickup_time2: "",
      }
      this.tableData=[]
      this.Visible = false;
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.trajectory_data[name]&&this.trajectory_data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      dom.style.border = "1px solid #E0E3E9";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      if (!this.data[name]&&!this.trajectory_data[name]) {
        dom.style.border = "1px solid red";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    display: flex;
    flex-direction: column;
    border: 0;
    width: 100%;
    height: calc(100vh - 167px);
    .content-box {
      padding: 0 !important;
      /deep/ .vxe-table--main-wrapper{
        font-size: 13px;
        .vxe-header--column, .vxe-body--column{
          height: 22px;
          padding-top: 1px;
          padding-bottom: 1px; 
          .vxe-cell{
            padding-top: 0;
            padding-bottom: 0;       
          }
        }
      }
    }
  }
  .filterBox{
    margin-bottom: 5px;
  }
  .pagination-container{
    margin-top: 5px;
  }
</style>